<template>
	<div class="score">
		<div class="score-a">
			<div class="score-b">
				<div class="score-c">
					<div>
						<span class="score-d">4.9</span>
						<span class="score-e">分</span>
						<span class="score-f">很棒</span>
					</div>
					<div>
						<span class="score-g">41403条评论</span>
						<span class="score-g">51条攻略</span>	
						<span class="score-h iconfont">&#xe912;</span>
					</div>				
				</div>
				<div class="score-right">
					<div>
						<span class="score-i">景点简介</span>
					</div>
					<div>
						<span class="score-j">开放时间、贴士</span>
						<span class="score-h iconfont">&#xe912;</span>
					</div>
				</div>
			</div>
		</div>
		<div class="location">
			<p>
				<i class="iconfont location-left">&#xe50a;</i>
				陕西省西安市雁塔区小寨东路91号
				<span class="iconfont location-right">&#xe912;</span>
			</p>
		</div>
	</div>
</template>
<script>

</script>
<style scoped>
	.score{
		margin-top:0.2rem;
	}
	.score-a{
		position: relative;
	    top: -.4rem;
		padding-left:0.2rem;
	    background: #fff;
	    border-radius: .1rem .1rem 0 0;
	}
	.score-b{
		padding-top: .1rem;
    	padding-bottom: .2rem;
    	display: flex;
    	width: 100%;
	}
	.score-b>div{
		flex:1;
		position:relative;
	}
	.score-c>div,.score-right>div{
		color: #212121;
	    font-size: .28em;
	    line-height: 1;
	}
	.score-d{
		font-size: .44rem;
	    color: #ff8300;
	    line-height: .44rem;
	}
	.score-e{
		font-size: .28rem;
    	color: #ff8300;
    	line-height: .48rem;
	}
	.score-f{
		font-size: .28rem;
	    color: #ff8300;
	    line-height: .48rem;
	    margin-left: .2rem;
	}
	.score-g,.score-j{
		font-size: .24rem;
	    color: #9e9e9e;
	    line-height: .32rem;
	    margin-right: .2rem;
	}
	.score-h{
		position: absolute;
	    top: .3rem;
	    right: .2rem;
	    color: #9e9e9e;
	    font-size: .24rem;
	    line-height:1;
	}
	.score-right:before{
		content: " ";
	    overflow: hidden;
	    position: absolute;
		top: 0;
	    width: 1px;
	    height: 100%;
		border-left: 1px solid #e0e0e0;
	}
	.score-i{
		font-size: .28rem;
	    color: #212121;
	    line-height: .48rem;
	    padding-left: .3rem;
	}
	.score-j{
		margin-left:0.28rem;
	}
	.location{	
		padding: .2rem 0;
		position: relative;	
		top:-0.4rem;    
	    line-height: .36rem;
	    color: #212121;
	    font-size:0.28rem;
	    background:#fff;
	    padding:0.2rem;
	    border-top:solid 1px #e0e0e0;
	}
	.location p{
		padding-right: .56rem;
	    position: relative;
	    padding-left: .56rem;
	}
	.location-left{
		display: block;
	    height: 100%;
	    line-height: 100%;
	    position: absolute;
	    left: 0;
	    top: .16rem;
	    margin-top: -.16rem;
	    margin-right: .2rem;
	    color: #9e9e9e;
	    font-size: .36rem;
	}
	.location-right{
		position: absolute;
	    right: 0;
	    top: 50%;
	    margin-top: -.14rem;
	    color: #9e9e9e;
	    font-size: .24rem;
	}
</style>